<jsp:include page="header.jsp" />

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Part 1</title>
<script type="text/javascript"
	src="//maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>

<style type="text/css">
#map {
	height: 400px;
	width: 600px;
	border: 1px solid #333;
	margin-top: 0.6em;
}
</style>
<%int otherid = -1;
if (request.getParameter("id")!=null)
	otherid = Integer.parseInt(request.getParameter("id"));  %>
<hr class="noscreen" />

<h1 id="title">Date Location Finder!</h1>

<!-- Three columns -->

<%

if(session.getAttribute("loggedIn") != Boolean.TRUE) {
    String redirect = "http://localhost:8080/UBCDatingServer/login.jsp";
    response.sendRedirect(redirect);
	}
%>

<%
Boolean result = (Boolean) session.getAttribute("MapResult");
if(true || result != null && result.equals(Boolean.TRUE)) {%>
<script type="text/javascript">
      var map;
      var service;
      var infowindow;

      <%-- Initializes the Map at the listed LatLng --%>
      function initialize() {
        var vancouver = new google.maps.LatLng(<%=session.getAttribute("dateLat")%>, <%=session.getAttribute("dateLng")%>);
        map = new google.maps.Map(document.getElementById('map'), {
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: vancouver,
          zoom: 13
        });

        <%-- States the type of location for the date in 750 radius from center of map --%>
        var request = {
          location: vancouver,
          radius: 750,
          types: ['<%=session.getAttribute("dateLoc")%>' ]
		};
		infowindow = new google.maps.InfoWindow();
		var service = new google.maps.places.PlacesService(map);
		service.search(request, callback);
	}
<%-- Creates markers for locations listed within the 500 radius --%>
	function callback(results, status) {
		if (status == google.maps.places.PlacesServiceStatus.OK) {
			for ( var i = 0; i < results.length; i++) {
				createMarker(results[i]);
			}
		}
	}
<%-- Creates Markers --%>
	function createMarker(place) {
		var placeLoc = place.geometry.location;
		var marker = new google.maps.Marker({
			map : map,
			position : place.geometry.location
		});
<%-- When clicked on marker, the info window is shown. --%>
	google.maps.event.addListener(marker, 'click', function() {
			infowindow.setContent(place.name);
			infowindow.open(map, this);
		});
	}

	google.maps.event.addDomListener(window, 'load', initialize);
</script>
<%} %>
</head>
<body>
	<div id="map"></div>
	<div id="text">
		<pre>
      
<%-- For debugging to test of suggested date locations show up --%>
<!-- var request = { -->
<%--   location: new google.maps.LatLng(<%=session.getAttribute("dateLat")%>, <%=session.getAttribute("dateLng")%>), --%>
<!--   radius: 500, -->
<%--   types: ['<%=session.getAttribute("dateLoc")%>'] --%>
<!-- }; -->


<form action="/UBCDatingServer/googlemap" method="post"> 
<input type="hidden" name="userID" value="<%=session.getAttribute("userID")%>" />
<input type="hidden" name="otherid" value="<%=otherid%>" />

<td class=formquestion><strong>Select a meeting area and we'll find a date near there:</strong></td>

<td><select name="dateWhere">
							<option value="pacific_center">Downtown Vancouver Pacific Center</option>
							<option value="richmond_center">Richmond Center</option>
							<option value="metrotown">Metrotown</option>
					</select>
</br>


<td class=formquestion><strong>Please select one of the following options for your suggested date locations:</strong></td>

<td><select name="dateType">
							<option value="art_gallery">Art Gallery</option>
							<option value="bar">Bar</option>
							<option value="bowling_alley">Bowling Alley</option>
							<option value="casino">Casino</option>
							<option value="movie_theatre">Movie Theatre</option>
							<option value="museum">Museum</option>
							<option value="night_club">Night Club</option>
							<option value="park">Park</option>
							<option value="restaurant">Restaurant</option>
							<option value="shopping_mall">Shopping Mall</option>
							<option value="spa">Spa</option>
							<option value="zoo">Zoo</option>
					</select>
</br>
<input type="submit" value="Find Date Location!" class="input-submit" name="button" />

<input type="submit" value="Set up a date!" class="input-submit" name="button" /> 			
			</form> 
      </pre>
</body>
<jsp:include page="footer.jsp"></jsp:include>
</html>

<%-- http://code.google.com/apis/maps/documentation/places/ was used to implement our webapp for our website. We are in compliance of Google's Term of Agreement. --%>
